{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ ftl('welcome-page10-page-title') }}{% endblock %}

{% block page_image %}{{ static('img/products/vpn/common/social-share.png') }}{% endblock %}

{% block body_class %}welcome-page10{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox_welcome_page10') }}
{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-10' %}
{% set _utm_campaign = 'welcome-10-vpn' %}
{% set source = '?source=welcome10' %}

{% block shoulder_cta %}{% endblock %}

{% block content_intro %}
  <section class="c-content-main">
    <div class="mzp-l-content mzp-t-content-md">
      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="90" alt="Mozilla VPN">

      <h1 class="c-main-title">{{ ftl('welcome-page10-main-heading') }}</h1>
      <p class="c-main-tagline">{{ ftl('welcome-page10-main-description') }}</p>

      <div class="c-main-cta">
        <a href="{{ url('products.vpn.landing') }}{{ source }}#pricing" class="mzp-c-button mzp-t-product mzp-t-xl" data-cta-text="Get Mozilla VPN" >{{ ftl('welcome-page10-get-mozilla-vpn') }}</a>
      </div>
    </div>
  </section>
{% endblock %}

{% block content_body %}
<section class="page-body">
  <div class="mzp-l-content mzp-t-content-md">
    <div class="mzp-l-columns mzp-t-columns-two">

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          <img src="{{ static('img/firefox/welcome/page10/laptop.svg') }}" alt="">
        </div>
        <h3 class="mzp-c-picto-title">{{ ftl('welcome-page10-very-fast') }}</h3>
        <div class="mzp-c-picto-body">
          <p>{{ ftl('welcome-page10-wireguard-powered') }}</p>
        </div>
      </div>

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          <img src="{{ static('img/firefox/welcome/page10/mobile.svg') }}" alt="">
        </div>
        <h3 class="mzp-c-picto-title">{{ ftl('welcome-page10-without-trace') }}</h3>
        <div class="mzp-c-picto-body">
          <p>{{ ftl('welcome-page10-never-log') }}</p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      {{ ftl('welcome-page10-why-see-this') }}
    </a>
  </strong>
</p>
{% endblock %}
